require(['config'], () => {
  require(['jquery', 'template', 'jquery.cookie', 'loadHF'], ($, template) => {
    // 配置自动转换 cookie 的 JSON 格式数据
    $.cookie.json = true
    // 读取保存在 cookie 中的购物车数组
    const cart = $.cookie('cart') || []

    /* 渲染表格的数据--显示购物车中选购的商品数据 */
    const html = template('cart-template', { cart })
    $('.cart-body').html(html)

    /* 定义函数，计算合计金额 */
    const total = () => {
      const pay = cart.reduce((result, prod) => {
        result += prod.amount * prod.price
        return result
      }, 0)
      $('.total').html(pay.toFixed(2))
    }

    // 计算合计
    total()

    /* 删除购物车商品 */
    $('.cart-body').on('click', '.del', e => {
      // 删除需要将保存在 cookie 中对应数组的某个元素删除掉，
      // 也要在页面的 DOM 树中删除对应的节点

      // 获取所在行
      const $tr = $(e.target).parents('tr')
      // 获取商品 id
      const id = $tr.data('id')
      // 根据 id 删除数组中的元素
      const index = cart.findIndex(prod => prod.id === id)
      cart.splice(index, 1)
      // 将删除元素后的数组重新保存到 cookie 中
      $.cookie('cart', cart, {expires: 70, path: '/'})

      // 将行从 dom 树中删除
      $tr.remove()

      // 计算合计
      total()
    })

    /* 加、减数量 */
    $('.cart-body').on('click', '.minus, .plus', e => {
      // 获取所在行
      const $tr = $(e.target).parents('tr')
      // 获取商品 id
      const id = $tr.data('id')
      // 查找数组中的商品对象
      const prod = cart.find(prod => prod.id === id)
      // 判断点击的按钮
      if ($(e.target).is('.plus')) { // 加
        prod.amount += 1
      } else { // 减
        if (prod.amount <= 1) {
          return
        }
        prod.amount -= 1
      }
      // 保存修改数量后的数组到 cookie 中
      $.cookie('cart', cart, {expires: 70, path: '/'})

      // 重新显示数量与小计
      $tr.find('.amount').html(prod.amount)
      $tr.find('.sub').html((prod.price * prod.amount).toFixed(2))

      // 计算合计
      total()
    })
  })
})